<template>
  <div class="address_container">
    <form>
      <li class="lili">
        <label>联系人：</label>
        <input type="text" v-model.trim="user_name" placeholder="收货人姓名" />
        <div class="sex">
          <p @click="sex = 1">
            <span>先生</span>
            <input
              type="radio"
              name="sex"
              :checked="sex == 1 ? 'checked' : ''"
            />
          </p>
          <p @click="sex = 0">
            <span>女士</span>
            <input
              type="radio"
              name="sex"
              :checked="sex == 0 ? 'checked' : ''"
            />
          </p>
        </div>
      </li>
      <li>
        <label>手机号：</label>
        <input type="text" v-model.trim="phone" placeholder="收货人手机号码" />
      </li>
      <li>
        <label>收货地址：</label>
        <input
          type="text"
          placeholder="选择收货地址"
          v-model="address"
          @click="$router.push('/searchAddress')"
        />
      </li>
      <li>
        <label>详细地址：</label>
        <input
          type="text"
          v-model="address_detail"
          placeholder="输入详细地址"
        />
      </li>
      <li>
        <label>标签：</label>
        <div class="tag">
          <span :class="{ active: tag == 1 }" @click="tag = 1">家</span>
          <span :class="{ active: tag == 2 }" @click="tag = 2">公司</span>
          <span :class="{ active: tag == 3 }" @click="tag = 3">学校</span>
        </div>
      </li>
    </form>
    <button class="btn" @click="submitForm">{{ Text }}</button>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { newAddress } from '@/network/getData';

export default {
  props: {
    addressItem: {
      type: Object,
      default: function() {
        return {};
      }
    },
    Text: String
  },
  data() {
    return {
      user_name: '',
      phone: null,
      address: '',
      address_detail: '',
      tag: null,
      sex: null
    };
  },
  deactivated() {
    console.log('离开了');
    this.user_name = '';
    this.phone = null;
    this.address = '';
    this.address_detail = '';
    this.tag = null;
    this.sex = null;
  },
  computed: {
    ...mapState(['orderAddress', 'userInfo', 'selectaddress'])
  },
  methods: {
    submitForm() {
      if (this.user_name === '') {
        console.log('请输入收货人姓名');
        return false;
      } else if (this.phone === '') {
        console.log('请输入收货人姓名');
        return false;
      } else if (this.orderAddress.name === '') {
        console.log('请输入收货人姓名');
        return false;
      } else if (this.address_detail === '') {
        console.log('请输入收货人姓名');
        return false;
      } else if (this.sex === null) {
        console.log('请输入收货人姓名');
        return false;
      }

      const obj = {
        user_name: this.user_name,
        phone: this.phone,
        address: this.orderAddress.name,
        address_detail: this.address_detail,
        sex: this.sex,
        tag: this.tag
      };
      newAddress(this.userInfo.id, obj).then(res => {
        if (res.code === 200) {
          this.$router.go(-1);
        }
      });
    }
  },
  watch: {
    orderAddress(value) {
      console.log('触发了');
      this.address = value.name;
    },
    addressItem(value) {
      this.user_name = value.user_name;
      this.phone = value.phone;
      this.address = value.address;
      this.address_detail = value.address_detail;
      this.tag = value.tag;
      this.sex = value.sex;
    }
  }
};
</script>

<style lang="less" scoped>
form {
  padding-top: 60px;
  background-color: #fff;
  li {
    height: 35px;
    line-height: 35px;
    padding: 0 10px;
    font-size: var(--font-size);
    border-bottom: 1px solid #eee;
  }
  label {
    display: inline-block;
    width: 100px;
    color: #222;
  }
  .tag {
    display: inline-block;
    span {
      padding: 2px 10px;
      margin-right: 10px;
      font-size: 13px;
      color: #333;
      border: 1px solid #eee;
      border-radius: 5px;
    }
    .active {
      border-color: var(--color-base);
    }
  }
  .lili {
    position: relative;
    .sex {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      p {
        display: flex;
        align-items: center;
        margin-right: 10px;
      }
      input {
        margin-left: 3px;
      }
    }
  }
}
.btn {
  display: block;
  width: 95%;
  line-height: 30px;
  border-radius: 5px;
  margin: 15px auto;
  background-color: var(--color-base);
}
</style>
